<template>
  <div class="container">
    <div>
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form ref="form" :model="form">
            <el-form-item label="姓名：">
              <el-input v-model="person.name" style="width:200px"></el-input>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="6">
          <el-form ref="form" :model="form">
            <el-form-item label="清扫队：">
              <el-select v-model="person.client" placeholder @change="changeClientOptions">
                <el-option
                  v-for="item in person.clientList"
                  :key="item.CLIENT_NO"
                  :label="item.CLIENT_NAME"
                  :value="item.CLIENT_NO"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="6">
          <el-form ref="form" :model="form">
            <el-form-item label="班组：">
              <el-select v-model="person.team" placeholder>
                <el-option
                  v-for="item in person.teamList"
                  :key="item.CLIENT_NAME"
                  :label="item.CLIENT_NAME"
                  :value="item.CLIENT_NO"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="6">
          <el-form ref="form" :model="form" style="float:left">
            <el-button size="mini" type="primary" @click="personQuery">查 询</el-button>
            <!-- <el-button size="mini" type="success" @click="addNewPerson">新 增</el-button> -->
          </el-form>
        </el-col>
      </el-row>
    </div>
    <el-table v-loading="loading" :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)" highlight-current-row>
      <!-- <el-table-column sortable  type="index" label="序号" align="center" width="100"></el-table-column> -->
           <el-table-column  prop="序号" label="序号" align="center"></el-table-column>
          <el-table-column  prop="姓名" label="姓名" align="center"></el-table-column>
          <el-table-column  prop="清扫队" label="清扫队" align="center"></el-table-column>
          <el-table-column  prop="班组" label="班组" align="center"></el-table-column>
          <el-table-column  prop="镇" label="镇" align="center"></el-table-column>
          <el-table-column  prop="村" label="村" align="center"></el-table-column>
          <el-table-column  prop="区域" label="区域" align="center"></el-table-column>
          <el-table-column sortable  prop="设置时间" label="设置时间" align="center"></el-table-column>
          <el-table-column label="操作" width="100">
        <template slot-scope="scope">
          <el-button type="text" icon="el-icon-info" @click="handleEdit(scope.$index, scope.row)">详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
        background
        layout="total, sizes, prev, pager, next, jumper"
        :current-page="currentPage"
        :page-size="pageSize"
        :total="tableData.length"
        @size-change="handleSizeChange"
        @current-change="handlePageChange"
      ></el-pagination>
    </div>
    <!-- 新增人员 -->
    <el-dialog
      title="人员作业道路详情"
      :visible.sync="personSettingForm.show"
      height="550px"
      width="450px"
      class="new_person"
    >
      <el-form :model="personSettingForm" label-width="80px">
              <el-form-item label="姓名：">
                <el-input v-model="personSettingForm.name" disabled></el-input>
              </el-form-item>
              <el-form-item label="清扫队：">
                <el-input v-model="personSettingForm.team" disabled></el-input>
              </el-form-item>
              <el-form-item label="班组：">
                <el-input v-model="personSettingForm.group" disabled></el-input>
              </el-form-item>
              <el-form-item label="设置时间：">
                <el-date-picker type="datetime" v-model="personSettingForm.setTime" disabled></el-date-picker>
              </el-form-item>
              <el-form-item label="镇：">
                <el-input v-model="personSettingForm.town" disabled></el-input>
              </el-form-item>
              <el-form-item label="村：">
                <el-input v-model="personSettingForm.village" disabled></el-input>
              </el-form-item>
              <el-form-item label="区域：">
                <el-select disabled v-model="personSettingForm.area" placeholder="请选择区域" @change="getAreaList">
                  <el-option
                    v-for="item in personSettingForm.areaList"
                    :key="item.Name"
                    :label="item.Name"
                    :value="item.Name"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item style="height: 6.771vw;" label="道路：">
                <div class="box" >
                  <ul class="marquee_list" :class="{marquee_top:animate}">
                      <li v-for="(item, index) in areaList" :key="index">
                          <span>{{item.ROADNAME}}</span>
                      </li>
                  </ul>
                  <!-- <p v-for="(item,index) in areaList" :key="index">{{item.ROADNAME}}</p> -->
                </div>
              </el-form-item>
              <el-form-item style=" margin-left: 15px;">
                <!-- <el-button type="success" @click="savePerson">保 存</el-button> -->
                <el-button type="danger" @click="personSettingForm.show = false">取 消</el-button>
              </el-form-item>
            </el-form>
      <!-- </div> -->
    </el-dialog>
  </div>
</template>
<script>
import '@/assets/css/common.css'
// import { formatDate } from '@/common/js/date.js'
// import export2Excel from '@/utils/exportExcel/index.js'
export default {
  data () {
    return {
      loading: false,
      currentPage: 1, //初始页
      pageSize: 10,    //    每页的数据
      // 人员管理
      person: {
        name: '',
        client: '',
        clientList: [],
        team: '',
        teamList: []
      },
      // 新增人员
      newPersonForm: {
        show: false,
        Name: '',
        Phone: '',
        SimCardNo: '',
        BirhDay: '',
        WorkDate: '',
        Sex: '男',
        WorkType: '',
        ClientNo: ''
      },
      tableData: [],
      originalData: [],
      areaList: [],
      personSettingForm: {
        show: false
      }
    }
  },
  created () {
    this.getClientList();
    this.getlistdata();
  },
  methods: {
    async getClientList () {
      const { data } = await this.$Http.get('DataListCompany/GetCleaneranceApi?ClientNo=' + localStorage.getItem('CLIENT_NO'))
      this.person.clientList = data
      this.person.clientList.unshift({"CLIENT_NO":"0","CLIENT_NAME":"全部"})
      // this.attendanceMonth.records.teamList = data
    },
    async changeClientOptions () {
      this.person.teamList = []
      this.person.team = ''
      if (this.person.client != '0' && this.person.client != ''){
      const { data } = await this.$Http.get('/DataListCompany/GetCleanerGroupListApi?ClientNo=' + this.person.client)
      this.person.teamList = data
      }
    },
    async getlistdata () {
      this.loading = true
      var url = 'DataListCompany/GetCleanerWorkRoadDetailApi?ParentNo=' + localStorage.getItem('CLIENT_NO')
      const { data } = await this.$Http.get(url)
      this.originalData = data

      this.personQuery()
    },
    // 人员管理查询
    personQuery () {
      this.currentPage = 1;
      this.tableData = this.originalData
      const { name, client, team } = this.person
      if (name) this.tableData = this.tableData.filter(item => item.姓名.includes(name))
      if (client) this.tableData = this.tableData.filter(item => item.CLIENT_NO.includes(client))
      if (team) this.tableData = this.tableData.filter(item => item.CLIENT_NO.includes(team))
      this.loading = false
    },
    // 新增人员
    addNewPerson () {
      
    },
    async addPerson (formName) {
      for (const k in this.newPersonForm) {
        if (this.newPersonForm[k] === '') {
          this.$message({
            message: '表单项不能为空！！',
            type: 'warning'
          })
          return false
        }
      }
      const { data } = await this.$Http.get('/DataListCompany/AddWorkerApi', {
        params: this.newPersonForm
      })
      if (data.IsSucess) {
        this.$message({
          message: '新增成功！！！',
          type: 'success'
        })
        this.getlistdata()
        this.resetForm('newPersonForm')
        this.newPersonForm.show = false
      }
    },
    // 重置新增人员表单
    resetForm (formName) {
      this.$refs[formName].resetFields()
      // this.newPersonForm.SimCardNo = ''
      // this.newPersonForm.BirhDay = ''
      // this.newPersonForm.WorkDate = ''
      this.newPersonForm = {
        show: true,
        Name: '',
        Phone: '',
        SimCardNo: '',
        BirhDay: '',
        WorkDate: '',
        Sex: '男',
        WorkType: '',
        ClientNo: ''
      }
    },
    async handleEdit (index, row) {
      this.personSettingForm = {
        show: true,
        name: row.姓名,
        team: row.清扫队,
        group: row.班组,
        setTime: row.设置时间,
        town: row.镇,
        village: row.村,
        area: row.区域,
        CLIENT_NO: row.CLIENT_NO
      }

      const { data } = await this.$Http.get('/DataListCompany/GetAreaByVillageApi?village=' + row.村)
      this.personSettingForm.areaList = data
      this.getAreaList()
    },
    // 获取区域列表
    async getAreaList () {
      const areaData = await this.$Http.get('/DataListCompany/GetRoadByAreaApi?AreaName=' + this.personSettingForm.area)
      this.areaList = areaData.data
    },
    // 保存人员信息
    async savePerson () {
      const params = {
        ClientNo: this.personSettingForm.CLIENT_NO,
        Area: this.personSettingForm.area,
        StaffName: this.personSettingForm.name
      }
      await this.$Http.get('/DataListCompany/SaveStaffRoadApi', { params })
      this.personSettingForm.show = false
      // 刷新列表信息
      this.getlistdata()
      // console.log(data);
    },
    // 分页导航
    handlePageChange (currentPage) {
      this.currentPage = currentPage;
      // console.log(this.currentPage)
      // this.$set(this.query, 'pageIndex', val);
      // this.getData();
    },
    handleSizeChange (size) {
      this.pageSize = size;
      console.log(this.pageSize)
    }
  }
}
</script>
<style scoped lang='less'>
.content {
  overflow-y: scroll;
}
.el-col-6 {
  min-width: 400px;
  min-height: 50px;
}
.el-table th {
  height: 40px;
}
.new_person {
  .el-form {
    width: 300px;
    // height: 180px;
    margin: 10px auto;
    background-color: #dfe8f6;
    .el-form-item {
      margin-bottom: 20px;
    }
    .btns {
      display: flex;
      align-items: center;
      justify-content: center;
      // padding-top: 10px;
      .el-button {
        margin: 0 10px;
        /deep/span {
          padding: 0 5px;
        }
      }
    }
  }
}
.box{
  display: block;
  position: relative;
  height: 6.771vw;
  overflow: auto;
}
.marquee_list {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}
.marquee_top {
  transition: all 1s;
  margin-top: -1.563vw
}
.marquee_list li {
  height: 1.354vw;
  line-height: 1.354vw;
}
.marquee_list li span {
  padding: 0.26vw;
  font-size: 0.729vw;
}
</style>